<!DOCTYPE html>
<html>
	<head>
		<title>经纬度坐标系图层 构建SuperMap iServer服务地图</title>
		<!--引用需要的脚本 注意：SuperMap.Include.js内部已经动态引用相关JS，CSS文件-->
		<script src="./libs/SuperMap.Include.js"></script>
	
	</head>
	<body onload="init()">
		<!--地图显示的div-->
		<div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 98%;"></div>
	</body>
</html>
	<script>
			//声明全局变量 map、layer、url
			var map, layer, url = "http://172.16.51.236:8090/iserver/services/map-tianditu2/rest/maps/矢量底图_经纬度";
			var urltwo = "http://172.16.51.236:8090/iserver/services/map-tianditu2/rest/maps/矢量中文注记_经纬度";
		  var	url2 = "http://support.supermap.com.cn:8090/iserver/services/data-DynamicData/rest/data";
			var vectors; //声明图层()1111
			var markers; //声明图层()1111
			var markerone; //声明图层()1111
			var vectorInfoWin; //声明矢量点击弹窗
			var markerInfoWin; //声明标记点击弹窗
			var animatorVector;
			var style = //声明样式
				{
					externalGraphic: "./theme/images/cluster1.png",
					fillColor: "#339933",
					fillOpacity: 1,
					strokeOpacity: 0,
					pointRadius: 12
				};
			var styleq = //声明样式
				{
					externalGraphic: "./theme/images/cluster2.png",
					fillColor: "#339933",
					fillOpacity: 1,
					strokeOpacity: 0,
					pointRadius: 12
				};
			function init() {

				//1.在指定DOM元素上初始化地图对象。
				map = new SuperMap.Map("map", {
					allOverlays: true
				});
				//2.添加控件。
				map.addControl(new SuperMap.Control.ScaleLine()); //地图比例尺控件
				map.addControl(new SuperMap.Control.LayerSwitcher()); //图层控制显示控件
				map.addControl(new SuperMap.Control.MousePosition()); //经纬度实时显示控件
				//2.初始化图层。
				//创建分块动态REST图层，该图层显示iserver 8C 服务发布的地图,
				//其中"想要"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
				layer = new SuperMap.Layer.TiledDynamicRESTLayer("矢量底图_经纬度", url, null, {
					maxResolution: "auto"
				});
				//其中"想要"为图层名称，url图层的服务地址，{transparent: true}设置到url的可选参数
				urltwo = new SuperMap.Layer.TiledDynamicRESTLayer("矢量中文注记_经纬度", urltwo, null, {
					maxResolution: "auto"
				});
				//构建 矢量类覆盖物 图层。()2222222
				vectors = new SuperMap.Layer.Vector("Vectors");
				//构建 标记类覆盖物 图层。()222222
				markers = new SuperMap.Layer.Markers("Markers");
				//构建 标记类覆盖物 图层。()222222
				markerone = new SuperMap.Layer.Markers("Markerone");
				//构建 矢量类覆盖物 图层。()2222222
 //初始化动画矢量图层
        animatorVector = new SuperMap.Layer.AnimatorVector("Train", {rendererType: "TadpolePoint"}, {
            //设置速度为每帧播放0.02小时的数据
            speed: 0.02,
            //开始时间为0晨
            startTime: 0,
            //结束时间设置为最后运行结束的火车结束时间
            endTime: 39
        });
				//创建一个移动矢量选择要素的控件，在指定图层上单击鼠标选择矢量要素。
				var selectFeature = new SuperMap.Control.SelectFeature(animatorVector, {
					onSelect: onFeatureSelected
				});
				map.addControl(selectFeature);
				//激活控件。
				selectFeature.activate();
				//监听图层信息加载完成事件，异步加载图层。
				layer.events.on({
					"layerInitialized": addLayer
				});
			//	vctor(); //执行添加矢量图层
				car(); //执行添加标记图层1
				go(); //执行添加标记图层2
			}

			function addLayer() {
				//将Layer图层加载到Map对象上。3333333333
				map.addLayers([layer, urltwo, vectors, markers, markerone, animatorVector]);
				//出图，设置中心点，指定放缩级别。//设置中心点，指定放缩级别。114.06932,33.60236
				map.setCenter(new SuperMap.LonLat(xx, yy), 15);
				startAnimator() //调用动画效果
				test();
			}

function  test(){
	
	var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
 getFeatureParam = new SuperMap.REST.FilterParameter({
            name: "Train@DynamicData",
            attributeFilter: "SmID < 2240"
        });
        getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
            queryParameter: getFeatureParam,
            datasetNames: ["DynamicData:Train"]
        });
	 //返回个数
	        getFeatureBySQLParams.toIndex = 3;
	        getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url2, {
	            eventListeners: {"processCompleted": addPoint, "processFailed": processFailed}
	        });
	
	        getFeatureBySQLService.processAsync(getFeatureBySQLParams);
	
}
			//移动船舶矢量图层
			function addPoint(getFeaturesEventArgs) {
var features;//x，y数据集
 result = getFeaturesEventArgs.result;
        if (result && result.features) {
            features = result.features;
        }
        console.log(features);

        //使用数据
        var pointFeatures = [];
        var points = [];
        var id = 0;
        for (var i = 0, len = features.length; i < len; i++) {
          //  var point = features[i].geometry;//接口集合数据
					var xxx = Math.random() * 113.06932;//替代数据
					var yyy = Math.random() * 32.60236;//替代数据
					var point = new SuperMap.Geometry.Point(xxx, yyy);//替代数据
            var po = features[i].geometry;
            if (id == features[i].data.FEATUREID) {
                points.push(po);
            }
            else {
                id = features[i].data.FEATUREID;
                points = [];
            }

            if (features[i].data.FEATUREID < 151) {
                var pointFeature = new SuperMap.Feature.Vector(point, {
                    FEATUREID: features[i].data.FEATUREID,
                    TIME: features[i].data.TIME
                }, style);
            }
            else {
                var pointFeature = new SuperMap.Feature.Vector(point, {
                    FEATUREID: features[i].data.FEATUREID,
                    TIME: features[i].data.TIME
                }, styleq);
            }

            pointFeatures.push(pointFeature);
        }
console.log(pointFeatures)
				animatorVector.addFeatures(pointFeatures);
			}

   function processFailed(e) {
        widgets.alert.showAlert(e.error.errorMsg, false);
    }
		//开始动画效果
			function startAnimator() {
				animatorVector.animator.start();
			}
			var xx = 114.06932;
			var yy = 33.60236;
			//aa第一个矢量类要素覆盖物
			function vctor() {
				//a1. 生成一个矢量要素覆盖物，并添加到矢量图层。
				//构建点几何对象类
				var point = new SuperMap.Geometry.Point(xx, yy);
				//构建矢量要素覆盖物
				var pointVector = new SuperMap.Feature.Vector(point);
				//修改点样式红色
				pointVector.style = {
					fillColor: "red",
					strokeColor: "yellow",
					pointRadius: 10,
					externalGraphic: "./theme/images/cluster1.png",
				};
				//添加 矢量要素覆盖物 到 矢量图层
				vectors.addFeatures(pointVector);
			}

			//固定标记类覆盖物
			//b1.第1个标记类覆盖物1号仓库
			function car() {
				//添加标记类覆盖物SuperMap.Size 用来描绘一对高宽值的实例
				var siz = new SuperMap.Size(30, 30);
				//依据size创建屏幕坐标
				//SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
				var offse = new SuperMap.Pixel(-(siz.w / 2), -siz.h);
				//SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签
				var ico = new SuperMap.Icon('./theme/images/ju.png', siz, offse);
				//依据位置和大小初始化标记覆盖物
				carMarker = new SuperMap.Marker(new SuperMap.LonLat(114.06932, 33.60236), ico);
				//添加 标记覆盖物 到 标记图层
				markers.addMarker(carMarker);
				//注册 click 事件,触发 mouseClickHandler()方法
				markers.events.on({
					"click": mouseClickHandler
				});
			}
			//c1.第二个标记类覆盖物2号仓库
			function go() {
				//SuperMap.Size 用来描绘一对高宽值的实例
				var sizee = new SuperMap.Size(30, 30);
				//依据size创建屏幕坐标
				//SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
				var offsett = new SuperMap.Pixel(-(sizee.w / 2), -(sizee.h));
				//SuperMap.Icon 创建图标，在网页中表现为div标签中的image标签
				var icons = new SuperMap.Icon('./theme/images/ju.png', sizee, offsett);
				//依据位置和大小初始化标记覆盖物
				goMarker = new SuperMap.Marker(new SuperMap.LonLat(114.06933, 33.60279), icons);
				//添加 标记覆盖物 到 标记图层
				markerone.addMarker(goMarker);
				//注册 click 事件,触发 mouseClickHandler()方法
				markerone.events.on({
					"click": mouseClickHandler
				});
			}
			//点击标记覆盖物，触发click事件会调用此函数。公共方法
			function mouseClickHandler(event) {
				closeMarkerInfoWin(); //销毁弹窗。
				//console.log(this)
				//	console.log(this.name)
				//SuperMap.Size 用来描绘一对高宽值的实例
				var size = new SuperMap.Size(30, 30);
				if (this.name == "Markers") { //一号仓库数据
					var textHTML = "<div style='width:200px'>";
					textHTML += '<p>仓库：<span>1号仓库</span></p>';
					textHTML += '<p>可用库存量：<span>1221</span></p>';
					textHTML += '<p>仓库负责人：<span>张某某</span></p>';
					textHTML += "</div>";
					//标记覆盖物的坐标,地图上弹窗显示的位置。
					var markerlonlat = new SuperMap.LonLat(114.06932, 33.60236);
				}
				if (this.name == "Markerone") { //二号仓库数据
					var textHTML = "<div style='width:200px'>";
					textHTML += '<p>仓库：<span>2号仓库</span></p>';
					textHTML += '<p>可用库存量：<span>1000</span></p>';
					textHTML += '<p>仓库负责人：<span>李某某</span></p>';
					textHTML += "</div>";
					//标记覆盖物的坐标,地图上弹窗显示的位置。
					var markerlonlat = new SuperMap.LonLat(114.07, 33.60236);
				}
				//构建固定位置浮动弹窗，自适应显示.仓库数据展示公共方法
				var popup = new SuperMap.Popup.Anchored(
					this.name, //唯一标识
					markerlonlat, //标记覆盖物的坐标,地图上弹窗显示的位置。
					new SuperMap.Size(220, 140), //弹窗内容的大小
					textHTML, //弹窗内容HTML的字符串表达
					null, //锚点。同image标签
					true, //是否显示关闭按钮。
					null); //弹窗关闭事件回调处理。
				popup.autoSize = true;
				markerInfoWin = popup;
				map.addPopup(popup);
			}
			// 销毁 Popup.Anchored 弹窗。
			function closeMarkerInfoWin() {
				if (markerInfoWin) {
					markerInfoWin.hide();
					markerInfoWin.destroy();
				}
			}


			//矢量要素点击事件
			// 点击矢量要素覆盖物，触发调用此函数。
			function onFeatureSelected(feature) {
				closeVectorInfoWin();
				console.log(feature)
				var id = feature.attributes.FEATUREID;
				if (id == 0) { //一号船舶数据
					var textHTML = "<div style='overflow-x:hidden;'>";
					textHTML += '<div style="margin-left:6%;margin-top:2%;">船舶：<span>WAN XIN 666</span></div>'
					textHTML += "</div>";
					//覆盖物的坐标,地图上弹窗显示的位置。
					//var markerlonlat = new SuperMap.LonLat(pointq);
				}
				if (id == 1) { //二号船舶数据
					var textHTML = "<div style='overflow-x:hidden;'>";
					textHTML += '<div style="margin-left:6%;margin-top:2%;">船舶：<span>WAN XIN 19</span></div>'
					textHTML += "</div>";
					//覆盖物的坐标,地图上弹窗显示的位置。
				//	var markerlonlat = new SuperMap.LonLat(point);
				}
			//	console.log(feature.attributes.FEATUREID)
				
				var lonLat = map.getCenter();
				//创建一个具有指向和边框的浮动弹窗
				var popup = new SuperMap.Popup.Anchored(
					id, //唯一标识
					lonLat, //标记覆盖物的坐标,地图上弹窗显示的位置。
					new SuperMap.Size(420,220),
					textHTML, //弹窗内容HTML的字符串表达
					null,
					true); //是否显示关闭按钮。
				vectorInfoWin = popup;
				//在地图中添加弹出窗口
				map.addPopup(popup);
			};
			//销毁 Popup.FramedCloud 弹窗。
			function closeVectorInfoWin() {
				if (vectorInfoWin) {
					vectorInfoWin.hide();
					vectorInfoWin.destroy();
				}
			}
		</script>